﻿@using RH.Web.Utility
@{
    ViewBag.Title = Html.GetPageTitle("Home");
    Layout = null;
    RH.Web.ViewModels.UtilityModels.PagerConfig _PagerConfig = ViewBag.PagerConfig as RH.Web.ViewModels.UtilityModels.PagerConfig;
}
<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    @if (ConfigReader.IsProductionDeployment) {
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css" rel="stylesheet">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    } else {
        @Styles.Render(Bundles.BootstrapCSS)
        @Scripts.Render(Bundles.jQuery)
    }
    @Styles.Render(Bundles.RHStyles)    
    
    <style type="text/css">
    .home-page-slider {
        position: relative;
        height: 350px;
        z-index: -1;
    }
    .home-page-slider img {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 8;
        opacity: 0.0;
    }
    .home-page-slider img.active {
        z-index: 10;
        opacity: 1.0;
    }
    .home-page-slider img.last-active {
        z-index: 9;
    }
    .home-page-slider img {
        /* Set rules to fill background */
        min-height: 100%;
        min-width: 1024px;
        /* Set up proportionate scaling */
        width: 100%;
        /*height: 665px;*/
        /* Set up positioning */
        position: fixed;
        top: 0;
        left: 0;
    }
    .home-page-footer
    {        
        overflow: hidden;        
        color: #ffffff;
        text-align: center;               
        height: 35px;
        width: 100%;
        display: block;
        margin-top: 20px;
        position: fixed;
        bottom: 20px;
    }    
    /*.home-page-body{margin-top:50px;}*/
    .home-page-body span{color:#FFFFFF; font-size:25px; font-weight:bold; text-shadow: 1px 2px 2px #333333;}     
    /*.search-box{padding:5px; height:40px; width:493px; margin:0px auto;}
    .search-box input{height:40px; width:391px; float:left; font-size:18px; color:#7b7b7b; font-weight:normal; padding:0px; padding-left:15px; margin:0px; border:none;background: rgb(90, 78, 80);background: rgba(255, 255, 255, 0.88)}*/
    /*.search-box #btnSearch{height:40px; width:96px; float:left; margin-left:5px; background-color:#e45626; cursor:pointer;}*/  
    /*.search-box #btnSearch img{margin:13px 0px 0px 40px;}*/
    /*.span-compare{color:#ffffff;}*/

    /*New styles written for RehabHousing*/
    .search-container-home{        
        width: 660px;
        max-width: 100%;
        min-width: 768px;
        margin: 0 auto;
        margin-top:150px;
    }
    .search-container-home .left-column{        
        background-color:#ffffff;   
        padding:0px;     
    }
    .search-container-home .home-header {
        height:74px;
        background-color:#e5e3e3;
        font-size:36px;
        color:#086312;
        border-bottom:#086312 1px solid;
    }
    .search-container-home .home-header span{
        margin-top:25px; margin-left: 15px;
    }
    .search-container-home .search-field{
        height:200px;
        
    }
    .search-container-home .search-field .form-container{
        margin-left:15px; margin-right:15px;
    }
    #txtKeyword, #ddlCategory{ width:100%; font-size:16px;}
    .search-container-home .search-button{
        background-color:#086312;
        height:275px;        
        background-image: url("");
        background-position: center center;
        background-repeat: no-repeat;
        cursor:pointer;
    }

    .button-separator{line-height:1px; border-bottom:#eeeeee 1px solid; margin-bottom:15px;}
    
    /*.search-type{height:50px;}*/
    .search-type .search-option{cursor:pointer; text-align:center; padding-top:7px; padding-bottom:7px; margin-bottom:15px; border-bottom:#eeeeee 1px solid;}
    .search-type .search-option span{font-size:1.2em;}
    .search-type .active{background-color:#086312; cursor:auto; color:#ffffff;}
    .search-type .border-right{border-right:#eeeeee 1px solid;}
                
    /*.searchbox, .msearchbox {
        background-image: url("");
        background-position: center center;
        background-repeat: no-repeat;
        float: right;
        width: 100%;
    }*/

    </style>
    <script language="javascript" type="text/javascript">
        function SlideSwitch() {
            var $active = $('.home-page-slider img.active');
            if ($active.length == 0) $active = $('.home-page-slider img:last');
            var $next = $active.next().length ? $active.next() : $('.home-page-slider img:first');
            $active.addClass('last-active');
            $next.css({ opacity: 0.0 })
                .addClass('active')
                .animate({ opacity: 1.0 }, 2000, function () {
                    $active.removeClass('active last-active');
                });
        }
        var BASE_URI = "/UploadedImages/HomePageSliders/";
        function GetImageUriPrefix() {
            var uriPrefix = BASE_URI;
            var screenWidth = screen.width;
            var screenHeight = screen.height;
            var aspectRatio = screenWidth / screenHeight;
            if (aspectRatio == (4 / 3)) {
                return uriPrefix + '4_3/';
            }
            else {
                //if (screenWidth > 1920)
                //    return uriPrefix + '16_9/2880/';
                //else if (screenWidth > 1600)
                //    return uriPrefix + '16_9/1920/';
                //else if (screenWidth > 1440)
                //    return uriPrefix + '16_9/1600/';
                //else
                //    return uriPrefix + '16_9/1440/';

                //For development only
                return uriPrefix + '16_9/1600/';
            }
        }
        var LOADED_IMAGES = 0;
        function InitSliders() {
            var uriPrefix = GetImageUriPrefix();
            var images = ['imac.jpg', 'jacket.jpg', 'chair.jpg', 'cookies.jpg', 'juta.jpg'];
            ///PreLoad and Wait for all image loading except the first one
            for (var i = 0; i < images.length; i++) {
                var src = uriPrefix + images[i];
                var imgClass = i == 0 ? 'active' : '';
                var img = $('<img />', { 'alt': '', 'class': imgClass }).appendTo('#divSliderContainer');
                $(img).one('load', function () {
                    LOADED_IMAGES++;
                    if (LOADED_IMAGES == images.length)
                        setInterval("SlideSwitch()", 5000);
                })
                .attr('src', src)
                .each(function () {
                    if (this.complete) $(this).trigger('load');
                });
            }
        }
        //var _SearchTabs = null;
        function InitSearchTabs() {
            var _SearchTabs = $('.search-option');
            $(_SearchTabs).each(function () {
                $(this).click(function () {
                    if (!$(this).hasClass('active')) {
                        $(_SearchTabs).removeClass('active');
                        $(this).addClass('active');
                        $('#hdnSearchType').val(($(_SearchTabs).index(this) == 0) ? 'B' : 'R');
                    }
                });
            });            
        }
        $(document).ready(function () {
            InitSliders();
            InitSearchTabs();
        });
    </script>
</head>
<body>

    @Html.Partial("_Header2")
    
    <div class="search-container-home">             
        <div class="col-md-10 left-column">
            <div class="home-header"><span>Sell, Buy, Rent Properties</span></div>
            
            <div class="search-field">
                <div class="search-type">
                    <div class="col-md-6 search-option border-right active">
                        <span><i class="glyphicon glyphicon-shopping-cart"></i> Buy </span>
                    </div>
                    <div class="col-md-6 search-option">
                        <span><i class="glyphicon glyphicon-book"></i> Rent</span>
                    </div>
                    <div class="clearfix"></div>
                </div>

                @*<div class="form-container rh-gridfix">*@
                    <form action="/Product/Search" method="post">
                        <input type="hidden" id="hdnSearchType" name="searchType" value="" />
                        @*<div>*@
                            <div class="col-md-7" style="padding-right:0px;">
                                <input id="txtKeyword" name="Keyword" class="form-control" type="text" placeholder="Your interested location" />
                            </div>
                            <div class="col-md-5">
                                @Html.DropDownList("CategoryID", BindSelectList.Categories(), new { id = "CategoryID" })
                            </div>
                            <div class="clearfix"></div>
                        @*</div>*@
                        <div class="button-separator" style="margin-top:36px;"></div>
                        <button id="btnSearch" class="btn btn-success btn-lg rh-left-15px" type="button" name="submit"><i class="glyphicon glyphicon-search"></i> Search</button>
                    </form>
                @*</div>*@

            </div>
        </div>

        <div class="col-md-2 search-button" id="divBtnSearch"></div>
        
        <div class="clearfix"></div>
    </div>

    @*<div class="container">        
        <div class="row">
            <div class="col-md-4">
                <h2>Heading</h2>
                <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
                <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
            </div>
            <div class="col-md-4">
                <h2>Heading</h2>
                <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
                <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
            </div>
            <div class="col-md-4">
                <h2>Heading</h2>
                <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
                <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
            </div>
        </div>

        <hr/>

        <footer>
            <p>Copyright&copy; ZealousIT @DateTime.Now.Year all rights reserved.</p>
        </footer>
    </div>*@
     <!-- /container -->

    @*New Design End*@

    <div id="divSliderContainer" class="home-page-slider"></div>
    @*@Html.JavaScript("jquery-ui-1.8.11.js", Url)*@
    @if (ConfigReader.IsProductionDeployment) {
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    }
    else {
        @Scripts.Render(Bundles.BootstrapJS)
    }
    @Scripts.Render(Bundles.CommonJS)
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $('#txtKeyword').focus();
            $('#btnSearch, #divBtnSearch').click(function () {
                var url = '@Url.PublicUrl("Search", "Product")?Key=' + encodeURIComponent($('#txtKeyword').val()) + '&type=' + $('#hdnSearchType').val() + '&Cat=' + $('#CategoryID').val();
                window.location = url;
            });
        });

    </script>
    @*@Html.Partial("_AutocompleteJS")*@
</body>
</html>